<template>
  <div>
  <div>App</div>
  <button @click="comp='News'">新闻</button>
  <button @click="comp='Music'">音乐</button>
  <button @click="comp='Game'">游戏</button>

      <!-- 
      缓存组件:
        <keep-alive> 包裹动态组件时，默认会缓存所有不活动的组件实例，而不是销毁它们
          - include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
          - exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
          - max - 数字。最多可以缓存多少组件实例
     -->
     <!-- <keep-alive>
      <component :is="comp" include="News"></component>
     </keep-alive> -->
     <!-- 数组写法 -->
     <!-- <keep-alive>
      <component :is="comp" :include="['News','Game']"></component>
     </keep-alive> -->
      <!-- include的正则写法 --> 
     <!-- <keep-alive :include="/^News$/g">
      <component :is="comp"></component>
    </keep-alive> -->
     <!-- exclude的数组写法 -->
     <keep-alive :exclude="['News']" :max="4">
      <component :is="comp"></component>
    </keep-alive>

     
    </div>
</template>

<script>
import Music from './components/Music'
import News from './components/News'
import Game from './components/Game'
export default {
name:"App",
components:{
  Music,
  News,
  Game
},
data(){
  return{
    comp:""
  }

  
}
}
</script>

<style>

</style>